<template>
	<view class="content">
		<template v-if="homeData.matchState==0">
			<u-button :text="$t('yuce.fabuyuce')" type="primary" @click="goUrl(`/pages/releaseForecast/releaseForecast?matchId=${matchId}&type=${active}`)"></u-button>
		</template>
		<view class="item" @click="navigatorTo(`/pages/myPrediction/myPrediction?uid=${item.uid}&matchType=${active}`)" v-for="(item,index) in attention" :key="index">
			<view class="i-top">
				<image class="image" :src="item.avatar||'https://www.soccerpet.com/static/img/default_photo.png'"></image>
				<view class="i-t-c">
					<view>{{item.nickname}}</view>
					<view class="text">
						<template v-for="(text) in item.tenResult">
							<image v-if="text==1" src="../../../static/image/yuce/hong.png" style="width: 20px;height: 20px;border-radius: 50%;"></image>
							<image v-if="text==2" src="../../../static/image/yuce/ping.png" style="width: 20px;height: 20px;border-radius: 50%;"></image>
							<image v-if="text==-1" src="../../../static/image/yuce/hei.png" style="width: 20px;height: 20px;border-radius: 50%;"></image>
						</template>
					</view>
				</view>
				<view class="i-t-r">
					<text class="red" style="color: red;font-size: 16px;font-weight: bold;">{{item.weekWinrate}}%</text>
					<view style="white-space: nowrap;margin-right: 5px;">{{$t('yuce.jinqmz')}}</view>
				</view>
			</view>
			<view class="i-center">
				{{item.title}}
			</view>
			<view class="i-end">
				<view>{{item.playTypeStr}}</view>
				<view class="iiend">
					<view class="btn" v-if="item.propStr">{{item.propStr}}</view>
					<view class="num">{{item.money}}</view>
					<image class="image" src="@/static/image/yuce/zuanshi.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		props: {
			matchId: {
				type: [String, Number],
				default: ''
			},
			//lq表示篮球 zq表示足球
			typeName:{
				type: String,
				default: ''
			},
			homeData:{
				type: Object,
				default:()=>{
					return {}
				}
			}
		},
		computed: {
			...mapGetters(['userInfo', 'api', 'config','userToken']),
		},
		components: {},
		data() {
			return {
				active:'',//赛事类型 1足球 2篮球
				attention:[],//在售预测
			}
		},
		mounted() {
			if(this.typeName=='lq'){
				this.active=2
				//篮球预测
				this.lqmatchRecommend()
			}else{
				this.active=1
				//足球预测
				this.zqmatchRecommend()
			}
			
		},
		methods: {
			goUrl(url){
				if(this.userInfo&&this.userToken){
					uni.navigateTo({
						url: url,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}else{
					uni.navigateTo({
						url: '/pages/login/login',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			navigatorTo(url){
				uni.navigateTo({
					url: url,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			//篮球预测
			lqmatchRecommend(){
				let params={
					matchId:this.matchId
				}
				uni.$u.http.get(this.api.api_v1_bkdata_matchRecommend, {params}).then(res => {
					if(res.code==200&&res.data){
						this.attention = res.data
					}
				})
			},
			//足球预测
			zqmatchRecommend(){
				let params={
					matchId:this.matchId
				}
				uni.$u.http.get(this.api.api_v1_fbdata_matchRecommend, {params}).then(res => {
					if(res.code==200&&res.data){
						this.attention = res.data
					}
				})
			},
		}
		
	}
</script>

<style lang="scss" scoped>
	.content {
		color: #fff;font-size: 14px;padding: 10px;
		.item{
			width: 100%;background-color: #242448;padding: 10px;box-sizing: border-box;border-radius: 5px;
			margin-top: 10px;
			.i-top{
				display: flex;justify-content: space-between;align-items: center;
				.image{
					width: 40px;height: 40px;margin-right: 10px;border-radius: 50%;
				}
				.i-t-c{
					width: 470rpx;
				}
				.i-t-r{
					font-size: 12px;width: 100rpx;display: flex;justify-content: center;flex-direction: column;align-items: center;
				}
			}
			.i-center{
				margin: 8px 0;
			}
			.i-end{
				display: flex;align-items: center;justify-content: space-between;
				.iiend{
					display: flex;align-items: center;
					.btn{
						padding: 4px 15px;background-color: rgb(240, 69, 69);border-radius: 15px;
					}
					.num{
						color: #f9da8a;font-size: 16px;margin: 0 10px;
					}
					.image{
						width: 20px;height: 16px;
					}
				}
			}
		}
		
	}
</style>